<template>
    <div>
        <div v-if="material.type === 'TEXT'">
            <table-popover :length="80" :text=material.content v-if="material.content"></table-popover>
        </div>
        <div v-if="material.type === 'IMAGE'">
            <el-image style="width: 100px; height: 100px" v-if="material.fileUrl"
                      :src="material.fileUrl"
                      fit="contain"
                      :preview-src-list="previewSrcList">
            </el-image>
        </div>
        <div v-if="material.type === 'VIDEO'">
            <video style="width: 100px; height: 100px" :src="material.fileUrl" controls
                   class="video" width="100%"></video>
        </div>
    </div>
</template>

<script>
import {getMpMaterialById} from '@/api/api'
import TablePopover from "@/component/single/TablePopover";

export default {
    name: "mp_material-show",
    components: {TablePopover},
    data() {
        return {
            material: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        id: {
            type: Number,
            default: 0
        },
        info: {
            type: Object,
            default: () => {
            },
        },
        previewSrcList: {
            type: Array,
            default: () => [],
        }
    },
    methods: {},
    watch: {
        info: {
            handler(newValue, oldValue) {
                this.material = newValue;
            },
            deep: true
        },
        id: function (val, oldVal) {
            getMpMaterialById({id: val}).then(res => {
                this.material = res.body;
            })
        }
    },
    created() {
        if (this.info) {
            this.material = this.info;
        }
        if (this.id) {
            getMpMaterialById({id: this.id}).then(res => {
                this.material = res.body;
            })
        }
    },
}
</script>

<style scoped>

</style>
